//可点击的文本
/**
 * Created by BaiChangHao on 2018/6/28.
 */
'use strict';

import React, { Component } from 'react';
import PropTypes from "prop-types";
import {
    View,
    StyleSheet,
    TouchableHighlight,
    Image,
} from 'react-native';

import Label from '../label';
import Color from '../../config/theme/standard/color';

import {getNavBarStyle} from './navBarStyle';
import Variables from '../../config/theme/styles/index';


export default class ClickAbleText extends Component {

    constructor(props) {
        super(props);
    }

    clickFunc=()=>{
        if(typeof this.props.clickFunc == 'function' && !this.props.disabled){
            this.props.clickFunc();
        }
    };

    renderLeftImage(){
        if(this.props.hasLeftImage){
            return this.renderImage()
        }
    }
    renderContent(){
        let { styles} = getNavBarStyle(Variables);
        if(this.props.isImage){
            let rightButtonImageStyle=this.props.rightButtonImageStyle?this.props.rightButtonImageStyle:null;
            let listenImgStyle = this.props.listenImgStyle ? this.props.listenImgStyle : null;
            return <Image
                style={[styles.clickableTextImage,rightButtonImageStyle,listenImgStyle]}
                source={this.props.title}
            />
        }else{
            // let color=this.props.color?{color:this.props.color}:null;
            let color=this.props.rightButtonColor?{color:this.props.rightButtonColor}:null;
            let fontFamily=this.props.fontFamily?{fontFamily:this.props.fontFamily}:null;
            let buttonFontSize=this.props.buttonFontSize?{fontSize:this.props.buttonFontSize}:null;
            let text = this.props.title ? this.props.title : '';
            let alignPosition = 'center';
            if(this.props.align == 'left'){
                alignPosition = 'flex-start';
            }else if(this.props.align == 'right'){
                alignPosition = 'flex-end';
            }
            if(this.props.title){
                return (<View style={{flex:1,alignItems:alignPosition}}>
                <Label text={text} fontFamily={fontFamily} type={'secTitle'} labelStyle={[styles.clickableTextTitle,color,buttonFontSize]} textAlign={this.props.align}/></View>);
            }
        }
    }
    renderImage(){
        let { styles} = getNavBarStyle(Variables);
        let img;
        if(this.props.leftImage){
            img = this.props.leftImage;
        }else if(this.props.leftButtonImage){
            img = this.props.leftButtonImage;
        }else{
            if(this.props.headerStyle == 'small'){
                img = require('../../assets/navBar_right.png');
            }else{
                img = require('../../assets/navbar_btn_arrow_new.png');
            }
        }
        let clickableTextIconStyle = [styles.clickableTextIcon];
        let leftImageContainerStyle = [styles.leftImageContainer];
        if(this.props.headerStyle == 'small'){
            clickableTextIconStyle.push({height:11,width:6});
            leftImageContainerStyle.push({marginLeft:12,width:6,height:11});
        }
        return(
            <View style={[leftImageContainerStyle,this.props.imgContainerStyle]}>
                <Image
                    style={[clickableTextIconStyle,this.props.leftImageStyle,this.props.leftButtonImageStyle]}
                    source={img}
                />
            </View>
        )
    }

    render(){
        let { styles} = getNavBarStyle(Variables);
        let containerStyle = this.props.container ? this.props.container : null;
        let activeOpacity = this.props.disabled ? 1 : 0.6;
        return(
            <TouchableHighlight
                activeOpacity={activeOpacity}
                underlayColor={Color.transparent}
                onPress={this.clickFunc}>
                <View style={[styles.clickableTextContainer,containerStyle]}>
                    {this.renderLeftImage()}
                    {this.renderContent()}
                </View>
            </TouchableHighlight>
        );
    }
}
ClickAbleText.propTypes={
    title:PropTypes.any,
    leftButtonImage:PropTypes.any,
    leftButtonImageStyle:PropTypes.any,
    hasLeftImage:PropTypes.bool,
    clickFunc:PropTypes.func,
    align:PropTypes.string,
    isImage:PropTypes.bool,
    rightButtonImageStyle:PropTypes.any,
    color:PropTypes.string,
    rightButtonColor:PropTypes.string,
    fontFamily:PropTypes.string,
    buttonFontSize:PropTypes.number,
    leftImage:PropTypes.any,
    leftImageStyle:PropTypes.any,
    imgContainerStyle:PropTypes.any,
    headerStyle:PropTypes.oneOf(['normal','small']),
    disabled:PropTypes.bool
};
ClickAbleText.defaultProps = {
    hasLeftImage:true,
    align:'left',
    isImage:false,
    headerStyle:'normal',
    disabled:false
};

